<template>
  <a-table :columns="columns" :data-source="dnslist" :pagination="pagination" @change="onClickPagination" :loading="loading">
    <!-- 时间 -->
    <template #time="{text}">
      {{FormatTime(text) }}
    </template>
    <!-- 操作 -->
    <template #operating="{record,index}">
      <a-popconfirm title="您确定要删除此域名吗?" ok-text="是" cancel-text="否" @confirm="onClickDelete(record,index)">
        <a-button type="danger"> 删除域名 </a-button>
      </a-popconfirm>
    </template>
  </a-table>
</template>

<script lang='ts'>
import { SetupContext } from "vue";
import { ColumnProps } from "ant-design-vue/types/table/column";
import { FormatTime } from "@/CommonAssets/FormatTime/FormatTime";
import { $message } from "../AntDesign/message";
import { deletedns } from "@/api/dnsApi";
const columns: ColumnProps<any>[] = [
  {
    title: "域名信息",
    dataIndex: "dns",
    align: "center",
  },
  {
    title: "添加时间",
    dataIndex: "time",
    align: "center",
    slots: { customRender: "time" },
  },
  {
    title: "操作",
    dataIndex: "operating",
    align: "center",
    slots: { customRender: "operating" },
  },
];

export default {
  emits: ["onClickDelete", "onDataLists"],
  props: {
    dnslist: Array,
    loading: {
      type: Boolean,
      default: false,
    },
    pagination: Object,
    pageSize: {
      type: Number,
      default: 8,
    },
  },
  setup(props: any, ctx: SetupContext) {
    /* 分页事件 */
    function onClickPagination(value: {
      current: number;
      pageSize: number;
      total: number;
    }) {
      props.pagination.current = value.current;
      ctx.emit("onDataLists", value.current);
    }

    /* 删除事件 */
    async function onClickDelete(record: any, index: number) {
      try {
        const result = await deletedns({ id: record._id });
        $message("success", result.data.message);
        ctx.emit("onClickDelete", { index });
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    return {
      columns,
      FormatTime,
      onClickDelete,
      onClickPagination,
    };
  },
};
</script>